{% extends 'common/panel.html' %}
{% block head %}
	<link rel="stylesheet" href="{{MEDIA_URL}}projects/nc_mlpa/css/replication.css" type="text/css" media="all" title="no title" charset="utf-8"/>
	<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
	<script src="{{MEDIA_URL}}report/js/jquery.hoverIntent.minified.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>	
{% endblock head %}
{% block panel %}
	<script type="text/javascript" charset="utf-8">
		lingcod.onShow(function(){
			$("td.hab_name").hoverIntent(
	              function(e){
	                  var cell_id = $(this).attr('id');
	                  var div_id = "#" + cell_id + "_descript";
	                  var offset = $(this).offset();
	                  var height = e.layerY + 15;
	                  $(div_id).css("position", "absolute").css("left", offset.left).css("top", height).show();
	              },
	              function() {
	                  var cell_id = $(this).attr('id');
	                  var div_id = "#" + cell_id + "_descript";
	                  $(this).removeClass("selected");
	                  $(div_id).hide();
	              }
	          );
			$("a.explain").hoverIntent(
				function(e){
					var exp_id = $(this).attr('id');
					var exp_div_id = "#" + exp_id + "_text";
	                var offset = $(this).offset();
	                var height = e.layerY + 15;
					$(exp_div_id).css("position", "absolute").css("left", offset.left - 200).css("top", height).show();
				},
				function(){
					var exp_id = $(this).attr('id');
					var exp_div_id = "#" + exp_id + "_text";
					$(exp_div_id).hide();
				}
			);
		});
	</script>
	<h2>{% if mpa.is_estuary %}Estuarine{% else %}Open Coast{% endif %} Habitat Replication</h2>
	<div class="lop" style="width:470px;text-align:center;">
	<div class="bioregion" style="margin-left:auto;margin-right:auto;">
    {% include "mpa_replication_table.html" %}
	</div>
	</div>
	<p>This table provides information about the habitat contained within a single MPA only.  In order to count as a replicate, not only must the MPA contain enough habitat,
		as indicated here, it must also meet other criteria.  It must be assigned a sufficient level of protection (LOP) and it, or the cluster of which it is a part, must be
		 of sufficient size ({{min_size}} square miles).  Please see the array level replication report for more comprehensive analysis.</p>
		
	
	{% for hab in habitats  %}
		<div class="hab_description" id="hab{{hab.pk}}_descript" style="display:none;">{{hab.description}}</div>
	{% endfor %}
{% endblock panel %}